<template>
<div class="pad10">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">控制中心</el-breadcrumb-item>
    <el-breadcrumb-item>导航管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<div class="pad10">
  <el-row>
    <el-button round size="mini" @click="add()" type="primary">添加导航</el-button>
    <el-button round size="mini" @click="del_all" type="danger">批量删除</el-button>
  </el-row>
</div>

<div class="pad10">

<div class="k">
    <el-table :data="tableData" border  v-loading="loading"  row-key="id" style="width: 100%;" height="600" @selection-change="quanxuan">
        <el-table-column align="center" type="selection" width="45" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column  label="图标" width="54" >
          <template #default="v">
            <el-avatar shape="square" :size="32" fit="fill" :src="v.row.img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="url" label="跳转地址" width="200" />
        <el-table-column align="center" label="是否显示"   width="80" :cell-class-name="juzhong">
          <template #default="v">
            <el-switch v-model="v.row.is_show" @change="kaiguan1(v.row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" :formatter="shijian" label="发布时间"  width="180" />
        <el-table-column align="center" prop="update_time" :formatter="shijian" label="更新时间"   width="180" />
        <el-table-column label="排序"   width="90" >
          <template #default="v">
            <el-input v-model="v.row.paixu" placeholder="" @change="paixu(v.row)"/>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" >
        <template #default="v">
            <el-button type="primary" round size="mini" @click="bianji(v.$index, v.row)">编辑</el-button>
            <el-button type="danger" round size="mini" @click="del(v.$index, v.row)">删除</el-button>
            
            
        </template>
        </el-table-column>
    </el-table>

</div>
</div>


<el-drawer
    v-model="drawer"
    :title="title"
    direction="rtl"
    size="40%"
    :append-to-body="true"
    :before-close="qingling"
  >
    
   <Daohang2 v-if="drawer" @shuaxin="get_shuaxin" :id="shuju.id"></Daohang2> 


  </el-drawer>

</template>

<script scoped>
import { defineComponent, ref,reactive,toRefs } from 'vue'
import { ElMessage,ElLoading } from 'element-plus'
import {request} from '../api/request.js'
import {get_shijian} from '../api/gongju.js'
import Daohang2 from '../components/Daohang2.vue'

export default defineComponent({
    data() {
        return {
            title: "增加导航",
            drawer: false,
            shuju: {id:0},
            quanxuanData: [], //表格选中的值
        };
    },
    methods: {
        get_shuaxin(){
            this.drawer=false;
        },
        bianji(index, row) {
            this.shuju=row;
            this.title = "编辑导航";
            this.drawer = true;
        },
        add() {
            this.title = "增加导航";
            this.drawer = true;
        },
        del(a, b) {
            this.shanchu([b.id]);
        },
        del_all() {
            var ids = [];
            this.quanxuanData.forEach((v, k) => {
                ids.push(v.id);
            });
            if (ids.length == 0) {
                ElMessage.error("请选择要删除的数据");
                return false;
            }
            this.shanchu(ids);
        },
        shanchu(ids) {
            this.loading=true;
            request("/g/info/del_daohang", { token: this.token, ids: ids }, res => {
                this.loading=false;
                console.log(res);
                if (res.ing == 1) {
                    ElMessage.success(res.msg);
                    this.jiazai();
                }
                else {
                    ElMessage.error(res.msg);
                }
            }, err => {
                loadingInstance.close();
                ElMessage.error(err.msg);
            });
        },
        juzhong() {
            return "juzhong";
        },
        shijian(r, c, v, i) {
            // console.log(v)
            return get_shijian(v);
        },
        kaiguan1(r) {
            //r传入的是整行的数据
            request("/g/info/update_daohang", { token: this.token, id: r.id, is_show: r.is_show == true ? 1 : 0 }, res => { 
                ElMessage.success(res.msg);
            }, err => { });
        },
        paixu(r) {
            //r传入的是整行的数据
            request("/g/info/update_daohang_paixu", { token: this.token, id: r.id, paixu: r.paixu }, res => {
                ElMessage.success(res.msg);
            }, err => { });
        },
        quanxuan(v) {
            console.log(v);
            this.quanxuanData = v;
        },
        qingling(){
            this.shuju={id:0};
            this.drawer=false;
        }
    },
    mounted() {
        console.log("挂载");
        this.jiazai();
    },
    setup() {
        var tableData = ref([]);
        var loading=ref(false);  //加载开关
        var token = window.sessionStorage.getItem("token");
        const jiazai = () => {
            loading.value=true;
            request("/g/info/get_daohang_list", { token: token }, res => {
                loading.value=false;
                console.log(res);
                if (res.ing == 1) {
                    tableData.value = res.data.list;
                }
                else {
                    ElMessage.error(res.msg);
                }
            }, err => {
                loadingInstance.close();
                ElMessage.error(err.msg);
            });
        };
        const sousuo = () => {
            jiazai();
        };
        return {
            tableData,
            loading,
            token,
            jiazai,
            sousuo
        };
    },
    //加在组件
    components: { Daohang2 }
})
</script>

<style scoped>
.k{border: 1px solid var(--el-border-color-base);}

</style>